<script setup lang="ts">
import { BoxContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";

const props = defineProps<{ model: BoxContainer }>()
const alignItem = props.model.align ?? 'flex-start'
const verticalAlign = props.model.verticalAlign ?? 'flex-start'



</script>

<template>
    <div class="pybi-box" :class="props.model.classes" :data-tag="model.tag" data-pybi-auto-width
        :style="props.model.styles">

        <Dynamic :component="cp" v-for="cp in props.model.children" :key="cp.id"></Dynamic>
    </div>
</template>

<style scoped lang="less">
.pybi-box {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: v-bind(alignItem);
    justify-content: v-bind(verticalAlign);
    overflow: auto;
    gap: 0.8em;

    .item-box {
        width: 100%;
        overflow: visible;
        display: flex;

        // &[pbi-data-child-tag="EChart"] {
        //     flex-grow: 1;
        // }
    }
}
</style>